<!DOCTYPE html>
<!--导入模板标签!!!!!-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
	 <!--
	        1.引入函数类库
	        2.使用模板工具类中的静态资源文件默认的条件下都在static中
	
	    -->
    <script src="/jquery-3.6.0.min.js"></script>
	<script>
		//1.jquery中有一种编程思想 函数式编程
		$(function(){
			//让整个页面加载完成之后再次执行
			// alert("jQuery调试")
			
			/**
			 * 常见Ajax用法
			 * 1.$.get(url地址，提交数据，回调函数，返回值类型)
			 * 2.$.post(...)
			 * 3.$.put(...)
			 * 4.$.delete(...)
			 */
			/**
			 * 1.常规for循环
			 * for(var i=0;i<result.length;i++){
					var u =result[i];
					console.log(u)
				}
				2.使用in的关键字
				for(index in result){
					var u=result[index]
					console.log(u)
				}
				3.使用of关键字
				for(user of result){
					console.log(user)
				}
			 */
			
			
			/**
			 * 业务需求：
			 * 要求向后端服务器发起请求 /findAjaxUser,之后将返回值结果 进行页面解析
			 */
			console.log("aaaaa")
			$.get("/findAjaxUser",function(result){
				//1.result是服务器返回的结果[{},{},{}....]
				//2.将返回值结果进行循环遍历
				//关键字 in index
					for(use of result){
						//3.获取对象的属性值
						var id =use.id
						var name =use.name
						var age =use.age
						var sex =use.sex
						var tr= "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
						//4.选中id=userTable的元素
						//5.之后追加数据append(追加的内容)
						$("#userTable").append(tr)
					}
				
			})
			
			/**
			 * 参数说明
			 * 1.key=value&key2=value2
			 * 例如：id=1&name=tom
			 * 
			 * 2.js对象的写法
			 * 语法：{key:value,key2:value2...}
			 * 例如：{id:1,name:"tomcat"}
			 */
			
			// $.get("/findAjaxUser",'id=1&name=tom',function(result){
			// 	console.log("ajax请求成功")
			// })
			
			// console.log("对象的请求语法")
			// $.get("/findAjaxUser",{id:1,name:"tomcat"},function(result){
			// 	console.log("ajax请求成功")
			// })
			
			$.post("/findAjaxUser",{id:1,name:"tomcat"},function(result){
				
				console.log("post请求执行成功")
			})
			
			//要求返回值都是json字符串
			$.getJSON("/findAjaxUser",{id:1,name:"tomcat"},function(result){
				console.log("getJSON请求执行成功")
			})
			
			//最为基本的ajax
			$.ajax({
				
				type:"get",//请求的类型
				url:"/findAjaxUser",//请求的路径
				data:{id:1,name:'tom'},//请求的参数
				
				//成功之后的回调函数
				success: function(result){
					console.log("ajax请求成功")
				},
				error:function(result){
					console.log("ajax请求失败")
				}
				
			})
		})
		
		
	</script>
</head>
<body>
<!--准备一个表格-->
<table id="userTable" border="1px" align="center" width="800px">
    <tr align="center">
        <td colspan="4"><h3>用户列表</h3></td>
    </tr>
    <tr align="center">
        <td>ID</td>
        <td>名称</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>

</table>
</body>
</html>